<template>

    <div class="header">
      <div class="header-left">
        <span class="iconfont icon-fanhui"></span>
      </div>
      <div class="header-inp">
        <span class="iconfont icon-sousuo"></span>
        <input type="text"  placeholder="请输入城市/景点/游戏主题">
      </div>
      <div class="header-right" @click="toCity">
        <span >{{this.currentCity}}</span>
       <span class="iconfont icon-triangle-down"></span>

       </div>
      </div>


</template>

<script>
	import {mapState} from 'vuex'
	export default {
	  name:'HomeHeader',
	  data(){
	    return {

	    }
	  },
	  computed:{
	    ...mapState({
	      currentCity:'city'
	    })
	  },
	  methods:{
	    toCity:function(){
	        //跳转城市页面
	        this.$router.push({
	          path:'/city'
	        })
	    }
	  }
	}
</script>

<style scoped="scoped">

  .header{
    height:0.86rem;
    background-color: rgb(0,188,212);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  .header .header-left{
    width: 0.64rem;
    text-align: center;
  }
  .header .header-right{
    min-width: 1.2rem;

    padding: 0px 0.2rem;
  }
  .header .header-inp{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    height:.64rem;
    background-color: #fff;
    border-radius: 0.1rem;
    color: #ccc;
  }
  .header .header-inp span{
    margin: 0px 0.2rem;
    font-size: .34rem;

  }
  .header .header-inp input{
    flex: 1;

  }



</style>
